import React,{Component} from 'react';
import {Breadcrumb,Button,notification,Select} from 'antd';
import service from '../lib/service';
const Option = Select.Option;

const points = [];
for(let i = 1; i <= 9; i++){
    points.push(<Option key={i}>{i}</Option>)
}

class TwentyFour extends Component{
    state={
        num1:1,
        num2:1,
        num3:1,
        num4:1,
        results:{
            results:[],
            is24:false
        }
    }


    handleCalculation(){
        
        let num1 = this.state.num1;
        let num2 = this.state.num2;
        let num3 = this.state.num3;
        let num4 = this.state.num4;
        let params = {num1:num1,num2:num2,num3:num3,num4:num4};
        service.twentyfour(params).then((res)=>{
            let message = "可以计算出24点";
            if(!res.data.is24)
                message = "不可以计算出24点"
            notification.success({
                key: '计算成功',
                message: message,
                description: '请查看..'
            });
            console.log(res.data)
            this.setState({results:res.data});
        }).catch((res)=>{
            console.log(res);
            // notification.error({
            //     key: 'error',
            //     message: '计算错误',
            //     description: res
            // });
        })
    }

    handleChangeNum1(e){
        this.setState({num1:e})
    }
    handleChangeNum2(e){
        this.setState({num2:e})
    }
    handleChangeNum3(e){
        this.setState({num3:e})
    }
    handleChangeNum4(e){
        this.setState({num4:e})
    }

    render(){
        return(
            <div style={{ background: '#fff', padding: 24, minHeight: 663 ,border:"1px solid #ececec"}}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                  <Breadcrumb.Item>遍历算法</Breadcrumb.Item>
                  <Breadcrumb.Item>二十四点</Breadcrumb.Item>
              </Breadcrumb>
              <div className="main">
                <div className="problem-describe">
                    <h1>问题描述</h1>
                    <p className="problem-describe-text">用户输入4位个位数（1～9），四个数之间只能通过+,-,*,/运算进行连接，请输出四则运算表达式，其求值结果为24。然后输出所有求值结果为24的组合。</p>                   
                </div>
                <div className="problem-reflection">
                    <h1>算法分析</h1>
                    <p className="problem-describe-text">24点采用穷举法，但穷举法也有优劣，此题采用的算法为先穷举所有的操作符的可能，再取第一个数和后面三个数中的一个数先计算，把计算结果和其他两个数存入另一个数组中，再让上一步的结果和后面两个数中的一个数进行计算，最后两个数再计算，输入则根据操作符的情况进行添加括号即可</p>
                </div>
                <div className="problem-solution">
                    <h1>解决方案</h1>
                    <p className="problem-describe-text">输入测试值</p>
                    <div className="calculation">
                        数1:<Select 
                            style={{ width: '200px' ,marginRight:'10px'}}
                            placeholder="Please select"
                            onChange={(e)=>this.handleChangeNum1(e)}
                            >{points}</Select> 
                        数2:<Select 
                            style={{ width: '200px' ,marginRight:'10px' }}
                            placeholder="Please select"
                            onChange={(e)=>this.handleChangeNum2(e)}
                            >{points}</Select> 
                        数3:<Select 
                            style={{ width: '200px' ,marginRight:'10px' }}
                            placeholder="Please select"
                            onChange={(e)=>this.handleChangeNum3(e)}
                            >{points}</Select> 
                        数4:<Select 
                            style={{ width: '200px' ,marginRight:'10px' }}
                            placeholder="Please select"
                            onChange={(e)=>this.handleChangeNum4(e)}
                            >{points}</Select>
                        <Button style={{marginLeft:'20px'}} onClick={this.handleCalculation.bind(this)}>计算结果</Button>
                    </div> 
                    <div className="result">
                        <p></p>
                        <div>{this.state.results.results.map((res)=>{
                            return <div>{res}</div>
                        })}</div>
                    </div>
                </div>
              </div>
            </div>
        )
    }
}


export default TwentyFour;